<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- CSS 文件 ，不要删，不够自己添加 -->
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-table.min.css">
<link rel="stylesheet" href="../assets/css/azzara.min.css">
<link rel="stylesheet" href="../assets/css/demo.css">
<link rel="stylesheet" href="css/buttonlocation.css">

<style>
    input[type='text']{
        border: 0px;
    }
    .commot-input{
        width: 150px;
        margin: 10px;
        line-height: 15px;
        font-size: 12px;
        border-radius: 8px;
        box-shadow: inset 0 2px 5px #eee;/*向div 元素添加阴影*/
        padding: 8px;
        border: 1px solid #D4D4D4;
        color: #333333;
        margin-top: 5px;
    }
    .commot-input:focus{
        border: 1px solid #50afeb;
        outline: none;
    }
</style>
<body>

<!--这里选择的是80%的容器，如果需要100%的话，自己修改一下-->
<div class="container">
    <!--内容在这里面添加就好了-->
    <ul style="display:inline" id="ul">
        <li><button data-target="#myModal" data-toggle="modal" class="btn btn-primary" onclick="getMApply()">添加产品</button></li>
        <li><button id="deleteProduct" class="btn btn-warning">删除产品</button></li>
        <li><button class="btn btn-secondary" onclick="preview()">预览</button></li>
    </ul>
    <form id="mApplyForm">
    <table style="width: 100%;" class="table table-bordered table-head-bg-info table-bordered-bd-default mt-4">
        <tr align="center"><td colspan="8"><h1>生产计划单</h1></td></tr>
        <tr>
            <td colspan="4" width="50%">登记人：<input type="text" class="commot-input" readonly name="register"></td>
            <td colspan="4" width="50%">设计人：<input type="text" class="commot-input" name="designer"></td>
        </tr>
        <tr>
            <th>点选</th>
            <th>产品名称</th>
            <th>产品编号</th>
            <th>描述</th>
            <th>数量</th>
            <th>单位</th>
            <th>单价(元)</th>
            <th>小计(元)</th>
        </tr>
        <tbody id="tbody">

        </tbody>
        <tr><td colspan="8">&nbsp;</td></tr>
        <tr align="center">
            <td>备注:</td>
            <td colspan="7">
                <textarea rows="3" class="form-control" name="remark"></textarea>
            </td>
        </tr>
        <tr><td colspan="8">&nbsp;</td></tr>
        <tr>
            <td colspan="4">总件数：<span id="totalCount" style="color: red;"></span></td>
            <td colspan="4">总金额：<span id="totalPrice" style="color: red;"></span>（元）</td>
        </tr>
    </table>
        <input type="button" class="btn btn-primary" style="float: right;display: none;"
               id="btn-save" value="提交生产计划单" onclick="saveMApply()">
    </form>

</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h2 class="modal-title">添加产品</h2>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <table width="100%" class="table-striped table-bordered table-hover">
                    <tr>
                        <td>产品编号</td>
                        <td>产品名称</td>
                        <td>用途类型</td>
                        <td>单位</td>
                        <td>单价</td>
                        <td>生产</td>
                    </tr>
                    <tbody id="tbody-MFile">

                    </tbody>
                </table>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>


<!--js用到的包，不够在自己添加-->
<script src="../js/jquery.3.2.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table-zh-CN.min.js"></script>
<script src="../js/common.js"></script>
<script src="js/xfsscjhdj.js"></script>
</body>
</html>